<template>
  <view @tap="handleToShowGoodsInfo()">
     <image class="goods-picture" :src="goodsPicture" mode="scaleToFill"  @error="imageError"></image>
	 <view class="title">
		<view v-if="is_new" class="is_new">
		 [新品]
		</view>
		<view class="title_content">
			{{goods_name}}
		</view>
	 </view>
	 <view class="show_property">
		<view v-if="owner_type === 10" class="shop_type green">
			店营
		</view>
		<view v-if="owner_type === 30" class="shop_type blue">
			自营
		</view>
		<view v-if="owner_type === 40" class="shop_type red">
			直营
		</view>
		<view>
			<uni-rate size="18" :readonly="true" :value="goods_star" />
		</view>
	 </view>
	 <view class="show_price">
	 	  <view class="yuan_price">
	 	  	 ¥ {{sale_price}}
	 	  </view>
		  <view class="separator">
		  	|
		  </view>
		  <view class="coin_price">
		  	 H {{coin}}
		  </view>
	 </view>
	 <view class="bottom">
	 	
	 </view>
  </view>
</template>
<script>
  export default
  {
    // 组件名称
    name: 'yh-goods-item',
    // 组件
    components:
    {
    },
	//属性
    props:
    {
		goodsItem:{
			type:Object,
			default:function()
			{
				return {
					id:0,
				 	//产品主图
					goods_main_picture:[
						{
							id: 1,
							picture: "https://api.youhujun.com/storage/admin/file/1/picture/beautiful002.jpg"
						},
					],
					is_new:1,
					owner_type:30,
					goods_name:'原创复古晕染印大家怕的房间卡哈伦裤',
					sale_price:0.00,
					coin:0.00,
					goods_star:0
				}
			}
			
		}
    },
    // 数据
    data()
    {
        return {
          msg: '产品列表单个产品组件',
		  goods_id:0,
		  //产品主图
		  goodsPicture:null,
		  //是否是新品
		  is_new:0,
		  owner_type:0,
		  goods_name:'',
		  sale_price:0.00,
		  coin:0.00,
		  goods_star:0
		  
        }
    },
    // 计算属性
    computed:
    {

    },
    // 监听
    watch:
    {

    },
    // 实例创建之前
    beforeCreate()
    {

    },
    // 创建
    created()
    {

    },
    // 挂载之前
    beforeMount()
    {

    },
    // 挂载 
    mounted()
    {
		this.goods_id = this.goodsItem.id
		this.goodsPicture = this.goodsItem.goods_main_picture[0].picture
		this.is_new = this.goodsItem.is_new
		this.owner_type = this.goodsItem.owner_type
		this.goods_name = this.goodsItem.goods_name
		this.sale_price = this.goodsItem.sale_price
		this.coin = this.goodsItem.coin
		this.goods_star = this.goodsItem.goods_star
		
    },
    // 更新之前
    beforeUpdate()
    {

    },
    // 跟新后
    updated()
    {

    },
    // 销毁之前
    beforeDestroy()
    {

    },
    // 销毁后
    destroyed()
    {

    },
    // 方法
    methods:
    {
		// 图片加载错误
		imageError: function(e) 
		{
		    console.error('image发生error事件，携带值为' + e.detail.errMsg)
		},
		//查看商品详情
		handleToShowGoodsInfo()
		{
			uni.navigateTo({
				url:'/pages/YouHu/V1/user/goods/goodsInfo/goodsInfo?goods_id='+this.goods_id
			})
		}
    }
  }
</script>
<style lang='scss' scoped>
	.goods-picture{
		width: 336rpx;
		height: 400rpx;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
	}
	.title{
		width: auto;
		height:28rpx;
		max-width: 336rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top: 20rpx;
		
		//新品提示
		.is_new{
			margin-left: 10rpx;
			min-width: 60rpx;
			width:auto;
			margin-right: 20rpx;
			height:28rpx;
			line-height: 28rpx;
			font-family: Noto Sans SC, Noto Sans SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #0D8CE9;
			text-align: center;
			font-style: normal;
			text-transform: none;
			white-space: nowrap;
			max-width: 40rpx;
			
		}
		.title_content{
			width: auto;
			max-width: 310rpx;
			font-family: Noto Sans SC, Noto Sans SC;
			font-weight: 500;
			height:28rpx;
			font-size: 28rpx;
			line-height: 28rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			color: #2A3563;
			text-align: left;
			font-style: normal;
			text-transform: none;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden; 
		}
	}
	.show_property{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		margin-top:20rpx;
		.shop_type{
			width: 52rpx;
			height: 36rpx;
			font-family: Noto Sans SC, Noto Sans SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			margin-left:10rpx;
			margin-right:20rpx;
			
		}
		.green{
			background: #00B42A;
		}
		.blue{
			background: #0D8CE9;
		}
		.red{
			background: #AD7AFD;
		}
	}
	.show_price{
		width:336rpx;
		height:28rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 24rpx;
		color: #FF530A;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		.yuan_price{
			width:auto;
			height:auto;
			margin-left: 10rpx;
			margin-right: 30rpx;
		}
		.separator{
			margin-right:30rpx;
		}
	}
	.bottom{
		width:100%;
		height:22rpx;
	}
</style>
